<template>
    <div class="text-generator-container">
        <n-card class="generator-card">
            <template #header>
                <div class="card-header">
                    <h1>AI文本生成器</h1>
                    <div class="header-actions">
                        <n-button @click="generateText" type="primary" :loading="generating" :disabled="!prompt.trim()">
                            <template #icon>
                                <n-icon>
                                    <FlashOutline />
                                </n-icon>
                            </template>
                            生成内容
                        </n-button>
                        <n-button @click="goBack">
                            <template #icon>
                                <n-icon>
                                    <ArrowBackOutline />
                                </n-icon>
                            </template>
                            返回
                        </n-button>
                    </div>
                </div>
            </template>

            <div class="content-layout">
                <div class="prompt-section">
                    <h3>提示词编辑</h3>
                    <n-input v-model:value="prompt" type="textarea" placeholder="输入提示词来描述你想要生成的内容..."
                        :autosize="{ minRows: 5, maxRows: 15 }" />

                    <div class="prompt-tools">
                        <n-button-group size="small">
                            <n-button @click="loadTemplate('角色')">角色模板</n-button>
                            <n-button @click="loadTemplate('场景')">场景模板</n-button>
                            <n-button @click="loadTemplate('动作')">动作模板</n-button>
                            <n-button @click="loadTemplate('故事')">故事模板</n-button>
                        </n-button-group>

                        <n-button size="small" @click="clearPrompt">
                            <template #icon>
                                <n-icon>
                                    <TrashOutline />
                                </n-icon>
                            </template>
                            清空
                        </n-button>
                    </div>

                    <n-divider />

                    <h3>生成选项</h3>
                    <n-form :model="generateOptions" label-placement="left" label-width="100">
                        <n-form-item label="生成类型" path="type">
                            <n-select v-model:value="generateOptions.type" :options="typeOptions" />
                        </n-form-item>

                        <n-form-item label="文本长度" path="length">
                            <n-slider v-model:value="generateOptions.length" :min="50" :max="1000" :step="50"
                                :marks="lengthMarks" />
                        </n-form-item>

                        <n-form-item label="创意程度" path="creativity">
                            <n-slider v-model:value="generateOptions.creativity" :min="0" :max="10" :step="1" />
                        </n-form-item>

                        <n-form-item label="处理位置">
                            <n-radio-group v-model:value="generateOptions.processingLocation">
                                <n-space>
                                    <n-radio value="local">本地处理</n-radio>
                                    <n-radio value="cloud">云端处理</n-radio>
                                </n-space>
                            </n-radio-group>
                        </n-form-item>
                    </n-form>

                    <n-collapse>
                        <n-collapse-item title="高级选项" name="advanced">
                            <n-form :model="advancedOptions" label-placement="left" label-width="100">
                                <n-form-item label="语言风格" path="style">
                                    <n-select v-model:value="advancedOptions.style" :options="styleOptions" />
                                </n-form-item>

                                <n-form-item label="输出格式" path="format">
                                    <n-select v-model:value="advancedOptions.format" :options="formatOptions" />
                                </n-form-item>

                                <n-form-item label="应用模型" path="model">
                                    <n-select v-model:value="advancedOptions.model" :options="modelOptions" />
                                </n-form-item>
                            </n-form>
                        </n-collapse-item>
                    </n-collapse>
                </div>

                <div class="result-section">
                    <div class="result-header">
                        <h3>生成结果</h3>
                        <n-space v-if="generatedText">
                            <n-button size="small" @click="copyResult">
                                <template #icon>
                                    <n-icon>
                                        <CopyOutline />
                                    </n-icon>
                                </template>
                                复制
                            </n-button>
                            <n-button size="small" @click="applyToProject">
                                <template #icon>
                                    <n-icon>
                                        <CheckmarkDoneOutline />
                                    </n-icon>
                                </template>
                                应用到项目
                            </n-button>
                            <n-button size="small" @click="editInResultEditor">
                                <template #icon>
                                    <n-icon>
                                        <CreateOutline />
                                    </n-icon>
                                </template>
                                进一步编辑
                            </n-button>
                        </n-space>
                    </div>

                    <div class="result-content" v-if="generatedText">
                        <n-scrollbar style="max-height: 500px;">
                            <div v-html="formattedResult"></div>
                        </n-scrollbar>
                    </div>

                    <div class="empty-result" v-else>
                        <n-empty description="尚未生成内容">
                            <template #extra>
                                <p class="hint-text">填写左侧提示词并点击"生成内容"按钮</p>
                            </template>
                        </n-empty>
                    </div>

                    <n-divider />

                    <div class="generation-history" v-if="generationHistory.length > 0">
                        <h3>生成历史</h3>
                        <n-list hoverable clickable>
                            <n-list-item v-for="(item, index) in generationHistory" :key="index"
                                @click="loadFromHistory(item)">
                                <n-thing :title="item.prompt.substring(0, 30) + (item.prompt.length > 30 ? '...' : '')"
                                    :description="formatDate(item.timestamp)">
                                    <template #description>
                                        <n-tag :type="getTagType(item.type)">{{ item.type }}</n-tag>
                                        <span class="history-time">{{ formatDate(item.timestamp) }}</span>
                                    </template>
                                </n-thing>
                            </n-list-item>
                        </n-list>
                    </div>
                </div>
            </div>
        </n-card>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import {
    NCard,
    NButton,
    NButtonGroup,
    NIcon,
    NSpace,
    NInput,
    NForm,
    NFormItem,
    NSelect,
    NSlider,
    NRadioGroup,
    NRadio,
    NDivider,
    NCollapse,
    NCollapseItem,
    NEmpty,
    NScrollbar,
    NList,
    NListItem,
    NThing,
    NTag
} from 'naive-ui'
import {
    FlashOutline,
    ArrowBackOutline,
    TrashOutline,
    CopyOutline,
    CheckmarkDoneOutline,
    CreateOutline
} from '@vicons/ionicons5'

const router = useRouter()
const message = useMessage()

// 提示词内容
const prompt = ref('')

// 生成状态
const generating = ref(false)

// 生成结果
const generatedText = ref('')

// 基本生成选项
const generateOptions = reactive({
    type: 'character',
    length: 300,
    creativity: 7,
    processingLocation: 'cloud'
})

// 高级选项
const advancedOptions = reactive({
    style: 'standard',
    format: 'text',
    model: 'default'
})

// 生成历史
const generationHistory = ref([
    {
        id: 1,
        prompt: '创建一个中年男性角色，性格内向但坚定',
        result: '张明，45岁，一位沉默寡言的中学教师。他的外表平平无奇，中等身材，略微驼背，总是穿着朴素的衬衫和西裤...',
        type: '角色',
        options: { length: 250, creativity: 6 },
        timestamp: new Date(Date.now() - 86400000)
    },
    {
        id: 2,
        prompt: '描述一个荒凉的沙漠场景，有一座神秘的古老神庙',
        result: '金色的沙丘绵延至天际，炽热的阳光无情地灼烧着这片荒芜之地...',
        type: '场景',
        options: { length: 350, creativity: 8 },
        timestamp: new Date(Date.now() - 43200000)
    }
])

// 选项数据
const typeOptions = [
    { label: '角色描述', value: 'character' },
    { label: '场景描述', value: 'scene' },
    { label: '动作描述', value: 'action' },
    { label: '对话生成', value: 'dialogue' },
    { label: '情节创作', value: 'plot' }
]

const styleOptions = [
    { label: '标准', value: 'standard' },
    { label: '文学性', value: 'literary' },
    { label: '简洁', value: 'concise' },
    { label: '戏剧性', value: 'dramatic' },
    { label: '幽默', value: 'humorous' }
]

const formatOptions = [
    { label: '纯文本', value: 'text' },
    { label: '结构化JSON', value: 'json' },
    { label: 'Markdown', value: 'markdown' }
]

const modelOptions = [
    { label: '默认模型', value: 'default' },
    { label: '创意模型', value: 'creative' },
    { label: '专业模型', value: 'professional' },
    { label: '自定义微调模型', value: 'custom' }
]

// 长度标记
const lengthMarks = {
    50: '简短',
    300: '中等',
    600: '详细',
    1000: '长篇'
}

// 计算格式化后的结果
const formattedResult = computed(() => {
    if (!generatedText.value) return ''

    if (advancedOptions.format === 'markdown') {
        // 这里应该有Markdown渲染逻辑，示例中仅用换行表示
        return generatedText.value.replace(/\n/g, '<br>')
    }

    if (advancedOptions.format === 'json') {
        try {
            // 尝试格式化JSON
            const jsonObj = JSON.parse(generatedText.value)
            return JSON.stringify(jsonObj, null, 2).replace(/\n/g, '<br>').replace(/ /g, '&nbsp;')
        } catch (e) {
            return generatedText.value
        }
    }

    // 默认纯文本
    return generatedText.value.replace(/\n/g, '<br>')
})

// 获取标签类型
const getTagType = (type: string) => {
    const typeMap: Record<string, string> = {
        '角色': 'success',
        '场景': 'info',
        '动作': 'warning',
        '对话': 'error',
        '情节': 'primary'
    }
    return typeMap[type] || 'default'
}

// 格式化日期
const formatDate = (date: Date) => {
    return date.toLocaleString('zh-CN', {
        month: 'numeric',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric'
    })
}

// 加载模板
const loadTemplate = (type: string) => {
    const templates: Record<string, string> = {
        '角色': '创建一个[年龄][性别]角色，[特点]。请详细描述其外表特征、性格特点、背景故事和动机。',
        '场景': '描述一个[场景类型]场景，环境是[环境描述]。请详细描述视觉元素、氛围、光线和可能的声音。',
        '动作': '描述一个角色[动作名称]的详细动作过程，包括表情、身体姿态和速度。',
        '故事': '创作一个关于[主题]的短故事，包含[角色数量]个角色。故事应有清晰的开端、冲突和结局。'
    }

    prompt.value = templates[type] || ''
    message.success(`已加载${type}模板`)
}

// 清空提示词
const clearPrompt = () => {
    prompt.value = ''
}

// 生成文本
const generateText = async () => {
    if (!prompt.value.trim()) {
        message.warning('请输入提示词')
        return
    }

    generating.value = true

    try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 2000))

        // 根据类型生成不同的演示文本
        if (generateOptions.type === 'character') {
            generatedText.value = `李明，32岁，一位身材高大的前军人，现在是一名私人保安。他有着刚毅的面容，深邃的眼神中透露着警惕，短发整齐，下巴上总是留着精心修剪的胡茬。

他的举止沉稳而有力，走路时步伐稳健，站姿挺拔，反映了他严格的军事训练背景。他的声音低沉而清晰，说话简洁有力，不喜欢浪费言辞。

李明性格内敛，不善于表达情感，但对亲近的人却异常忠诚。他做事一丝不苟，有着极强的责任感和使命感，这使他在工作中备受信赖。然而，军旅生涯留下的心理创伤让他偶尔会陷入沉思，对突然的响声特别敏感。

他的背景故事是从军十年，参与过多次危险任务，退役后难以适应普通生活。现在作为一名私人保安，他找到了发挥所长的方式，但内心仍然渴望更大的人生意义和归属感。`
        } else if (generateOptions.type === 'scene') {
            generatedText.value = `黄昏时分的老旧码头，天空被染成了橘红色，云彩如燃烧的绸缎横贯天际。斜阳的余晖洒在平静的海面上，形成一条金色的光路，延伸至远方模糊的地平线。

码头的木板已经被海风和潮水侵蚀得灰白斑驳，每一块木板都诉说着岁月的故事。几艘老旧的渔船静静地停泊在岸边，随着微微的海浪轻轻摇晃，船身上剥落的油漆和斑驳的纹理在落日的光芒下显得格外沧桑而温暖。

空气中弥漫着咸湿的海风气息，混合着木材、海藻和鱼腥的复杂味道。远处偶尔传来海鸥的鸣叫声，与温柔拍打岸边的海浪声交织在一起，构成了这个宁静时刻的自然交响曲。

码头的一角，几盏渔灯已经亮起，温暖的黄光在逐渐降临的暮色中形成了小小的光晕。几个年迈的渔民正坐在木箱上，低声交谈，他们布满皱纹的脸庞和沧桑的眼神，仿佛是这个古老码头最忠实的守护者。`
        } else {
            generatedText.value = `示例生成内容，基于提示词：${prompt.value}\n\n这是根据您的提示词生成的内容示例。实际生成的内容将根据您选择的类型、长度和创意度而有所不同。AI生成的内容可以帮助您快速获取创意灵感，但可能需要进一步编辑和调整以符合您的具体需求。`
        }

        // 添加到历史记录
        generationHistory.value.unshift({
            id: Date.now(),
            prompt: prompt.value,
            result: generatedText.value,
            type: typeOptions.find(t => t.value === generateOptions.type)?.label || '其他',
            options: { ...generateOptions },
            timestamp: new Date()
        })

        message.success('内容生成成功')
    } catch (error) {
        message.error('生成失败，请重试')
        console.error(error)
    } finally {
        generating.value = false
    }
}

// 从历史记录加载
const loadFromHistory = (item: any) => {
    prompt.value = item.prompt
    generatedText.value = item.result
    message.success('已加载历史记录')
}

// 复制结果
const copyResult = () => {
    if (!generatedText.value) return

    navigator.clipboard.writeText(generatedText.value)
        .then(() => {
            message.success('已复制到剪贴板')
        })
        .catch(() => {
            message.error('复制失败')
        })
}

// 应用到项目
const applyToProject = () => {
    if (!generatedText.value) return

    message.success('已应用到当前项目')
    // 这里应该有应用生成内容到项目的逻辑
}

// 进一步编辑
const editInResultEditor = () => {
    if (!generatedText.value) return

    // 将生成结果保存到存储中，以便在结果编辑器中使用
    localStorage.setItem('aiGeneratedText', generatedText.value)

    // 导航到结果编辑器
    router.push('/ai-result-editor')
}

// 返回上一页
const goBack = () => {
    router.back()
}
</script>

<style lang="scss" scoped>
.text-generator-container {
    padding: 20px;
    height: 100%;
    overflow-y: auto;

    .generator-card {
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h1 {
                margin: 0;
                font-size: 24px;
                font-weight: 500;
            }

            .header-actions {
                display: flex;
                gap: 12px;
            }
        }
    }

    .content-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 20px;

        @media (max-width: 1200px) {
            grid-template-columns: 1fr;
        }
    }

    .prompt-section {
        h3 {
            margin-top: 0;
            margin-bottom: 16px;
        }

        .prompt-tools {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            margin-bottom: 20px;
        }
    }

    .result-section {
        .result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            h3 {
                margin: 0;
            }
        }

        .result-content {
            padding: 16px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            min-height: 300px;
            margin-bottom: 20px;
            background-color: var(--body-color);
        }

        .empty-result {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 300px;
            border: 1px dashed var(--border-color);
            border-radius: 4px;
            margin-bottom: 20px;

            .hint-text {
                color: var(--text-color-3);
                margin-top: 8px;
            }
        }

        .generation-history {
            margin-top: 20px;

            h3 {
                margin-top: 0;
                margin-bottom: 16px;
            }

            .history-time {
                margin-left: 12px;
                font-size: 12px;
                color: var(--text-color-3);
            }
        }
    }
}
</style>